import styles from "./index.module.less";
import { channel_id, merchant_id } from "./store";
import { getLastWeek } from "./utils";
export const tablePage = renderTablePage();
export default defineComponent({
  setup(props, { expose }) {
    const tableData = ref([]);
    const defineTable = {
      pagination: tablePage,
      bordered: true,
      loading: ref(false),
      on: {
        change(paging: { current: number; pageSize: number }) {
          tablePage.current = paging.current;
          tablePage.pageSize = paging.pageSize;
          fetchList();
        },
      },
      columns: reactive(
        defineColumns([
          {
            title: getProxyT("table207"),
            dataIndex: "count_date",
            key: "count_date",
          },
          {
            title: getProxyT("table208"),
            dataIndex: "new",
            key: "new",
          },
          {
            title: getProxyT("table209"),
            dataIndex: "new_summary",
            key: "new_summary",
          },
          {
            title: getProxyT("table210"),
            dataIndex: "loss",
            key: "loss",
          },
          {
            title: getProxyT("table211"),
            dataIndex: "loss_summary",
            key: "loss_summary",
          },
          {
            title: getProxyT("table212"),
            dataIndex: "total",
            key: "total",
          },
        ])
      ),
      dataSource: tableData,
      tableSlot: {
        headerCell: ({ title, column }: any) => {
          switch (column.key) {
            case "new":
              return (
                <div class="s-table-header_cell" style="column-gap: 5px;">
                  <i>{title}</i>
                  <tips-cell
                    content={[`0-24${$t("channel11")}(${$t("channel12")})`]}
                  />
                </div>
              );
            case "new_summary":
              return (
                <div class="s-table-header_cell" style="column-gap: 5px;">
                  <i>{title}</i>
                  <tips-cell
                    content={[`${$t("channel17")}(${$t("channel12")})`]}
                  />
                </div>
              );

            case "loss":
              return (
                <div class="s-table-header_cell" style="column-gap: 5px;">
                  <i>{title}</i>
                  <tips-cell content={[`0-24${$t("channel15")}`]} />
                </div>
              );
            case "loss_summary":
              return (
                <div class="s-table-header_cell" style="column-gap: 5px;">
                  <i>{title}</i>
                  <tips-cell
                    content={[`${$t("channel18")}N${$t("channel19")}`]}
                  />
                </div>
              );
            case "total":
              return (
                <div class="s-table-header_cell" style="column-gap: 5px;">
                  <i>{title}</i>
                  <tips-cell
                    content={[`${$t("channel20")}(${$t("channel12")})`]}
                  />
                </div>
              );
            default:
              return <div class="s-table-header_cell">{title}</div>;
          }
        },
        bodyCell({ value, text, index, column, record }: any) {
          switch (column.key) {
            case "index":
              return (
                <i>
                  {index + 1 + (tablePage.current - 1) * tablePage.pageSize}
                </i>
              );
          }
        },
      },
    };
    const datesArray = getLastWeek();
    const dateRange = ref([
      $dayjs(datesArray[0]),
      $dayjs(datesArray[datesArray.length - 1]),
    ]);
    const fetchList = async () => {
      const res = await channelApi.chart.queryChannelPage({
        page: tablePage.current,
        page_size: tablePage.pageSize,
        start_date: toLocalTime(dateRange.value, "YYYY-MM-DD")[0],
        end_date: toLocalTime(dateRange.value, "YYYY-MM-DD")[1],
        channel_id: !isEmptyType(channel_id.value)
          ? channel_id.value
          : undefined,
        merchant_id: !isEmptyType(merchant_id.value)
          ? merchant_id.value
          : undefined,
      });
      tableData.value = res?.data?.list ?? [];
      tablePage.total = res?.data?.attributes?.total ?? 0;
    };
    const initPage = () => fetchList();
    expose({ initPage });
    return () => (
      <>
        <div class={styles.Table}>
          <div class={styles.Flex_wrap}>
            <div class={styles.flex_item}>
              <s-title style="margin-bottom: 0px;">{$t("channel22")}</s-title>
            </div>
            <div class={styles.flex_item}>
              <div class={styles.title}>{$t("table73")}：</div>
              <div>
                <a-range-picker
                  v-model:value={dateRange.value}
                  onChange={() => fetchList()}
                />
              </div>
            </div>
          </div>
          <s-table {...defineTable} />
        </div>
      </>
    );
  },
});
